<!--组件说明-->
<!-- -->
<!-- author:${author}. date: ${date}-->
<template>
  <div class="${entity?lower_case}">
    <mt-button type="primary" size="large" @click="add">增加</mt-button>
    <br>
    <mt-button type="primary" size="large" @click="getByid">查询ID为1</mt-button>
    <br>
    <mt-button type="primary" size="large" @click="delById">删除</mt-button>
    <br>
    <mt-button type="primary" size="large" @click="update">修改</mt-button>
    <br>
    <mt-button type="primary" size="large" @click="list">查询列表</mt-button>
    <br>
    服务器返回:
    <div>{{serverback}}</div>
  </div>
</template>

<script>
  import Vue from "vue";
  import {Button} from "mint-ui";
  import {MessageBox} from "mint-ui";

  Vue.component(Button.name, Button);
  export default {
    name: "${entity?lower_case}",
    components: {},
    data() {
      return {
        serverback: ""
      };
    },
    methods: {
      add() {
        let $this = this;
        let param = {name: "新增的姓名", age: 1, email: "newEmail@leedarson.com", roleId: 1}; //这个是定义参数，注意get写法还是和post有所差别
        let url = "/olivier2.hr/${entity?lower_case}";
        this.$http.post(url, param, {emulateJSON: true}).then(
          response => {
            //通过response.body得到服务器返回的结果，如果返回的是json，则该结果会自动成为json对象
            console.log("返回响应内容");
            console.log(response.body);
            $this.serverback = response.body;
          },
          response => {
            //请求出错的时候会进行的代码，这里进行区分了几种网络状态，
            // 具体情况的处理【请自己机智】看情况可能要用上国际化
            let status = response.status;
            console.error(response);
            $this.serverback = response.statusText; //业务逻辑
            switch (status) {
              case 404:
                MessageBox("Notice", "网络发生问题，请重试");
                break;
              case 500:
                MessageBox("Notice", "系统发生问题，请联系管理员");
                break;
              default:
                MessageBox("Notice", "发生未知问题，请重试");
                break;
            }
          }
        );
      },
      getByid() {
        let $this = this;
        // 然而这里会有乱码，可能需要后端解决//总之尽量用POST
        let url = "/olivier2.hr/${entity?lower_case}/1"; //
        this.$http.get(url, null).then(
          response => {
            //通过response.body得到服务器返回的结果，如果返回的是json，则该结果会自动成为json对象
            console.log("返回响应内容");
            console.log(response.body);
            $this.serverback = response.body; //业务逻辑
          },
          response => {
            //请求出错的时候会进行的代码，这里进行区分了几种网络状态，具体情况的处理请自己机智
            let status = response.status;
            console.error(response);
            $this.serverback = response.statusText; //业务逻辑
            switch (status) {
              case 404:
                MessageBox("Notice", "网络发生问题，请重试");
                break;
              case 500:
                MessageBox("Notice", "系统发生问题，请联系管理员");
                break;
              default:
                MessageBox("Notice", "发生未知问题，请重试");
                break;
            }
          }
        );
      },
      list() {
        let $this = this;
        // let param = {lcpcode: "参数"}; //这个是定义参数，注意get写法还是和post有所差别
        // 然而这里会有乱码，可能需要后端解决//总之尽量用POST
        let url = "/olivier2.hr/${entity?lower_case}/list"; //
        this.$http.get(url, null).then(
          response => {
            //通过response.body得到服务器返回的结果，如果返回的是json，则该结果会自动成为json对象
            console.log("返回响应内容");
            console.log(response.body);
            $this.serverback = response.body; //业务逻辑
          },
          response => {
            //请求出错的时候会进行的代码，这里进行区分了几种网络状态，具体情况的处理请自己机智
            let status = response.status;
            console.error(response);
            $this.serverback = response.statusText; //业务逻辑
            switch (status) {
              case 404:
                MessageBox("Notice", "网络发生问题，请重试");
                break;
              case 500:
                MessageBox("Notice", "系统发生问题，请联系管理员");
                break;
              default:
                MessageBox("Notice", "发生未知问题，请重试");
                break;
            }
          }
        );
      },
      delById() {
        let $this = this;
        let param = {name: "参数"}; //这个是定义参数，注意get写法还是和post有所差别
        // 然而这里会有乱码，可能需要后端解决//总之尽量用POST
        let url = "/olivier2.hr/${entity?lower_case}/3"; //
        this.$http.delete(url, {params: param}).then(
          response => {
            //通过response.body得到服务器返回的结果，如果返回的是json，则该结果会自动成为json对象
            console.log("返回响应内容");
            console.log(response.body);
            $this.serverback = response.body; //业务逻辑
          },
          response => {
            //请求出错的时候会进行的代码，这里进行区分了几种网络状态，具体情况的处理请自己机智
            let status = response.status;
            console.error(response);
            $this.serverback = response.statusText; //业务逻辑
            switch (status) {
              case 404:
                MessageBox("Notice", "网络发生问题，请重试");
                break;
              case 500:
                MessageBox("Notice", "系统发生问题，请联系管理员");
                break;
              default:
                MessageBox("Notice", "发生未知问题，请重试");
                break;
            }
          }
        );
      },
      update() {
        let $this = this;
        let param = {name: "update"}; //这个是定义参数，注意get写法还是和post有所差别
        let url = "/olivier2.hr/${entity?lower_case}/1";
        this.$http.patch(url, param, {emulateJSON: true}).then(
          response => {
            //通过response.body得到服务器返回的结果，如果返回的是json，则该结果会自动成为json对象
            console.log("返回响应内容");
            console.log(response.body);
            $this.serverback = response.body;
          },
          response => {
            //请求出错的时候会进行的代码，这里进行区分了几种网络状态，
            // 具体情况的处理【请自己机智】看情况可能要用上国际化
            let status = response.status;
            console.error(response);
            $this.serverback = response.statusText; //业务逻辑
            switch (status) {
              case 404:
                MessageBox("Notice", "网络发生问题，请重试");
                break;
              case 500:
                MessageBox("Notice", "系统发生问题，请联系管理员");
                break;
              default:
                MessageBox("Notice", "发生未知问题，请重试");
                break;
            }
          }
        );
      }
    },
    filters: {},
    computed: {},
    props: [],
    watch: {},
    created() {
    },
    mounted() {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .${entity?lower_case} {
    height: 100%;
    width: 100%;
    padding: 1rem;
    font-size: 2rem;
  }
</style>
